<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>vue与控制脚本的交互 | RobotJs | 用JS任意控制手机上的APP</title>
  <link rel="stylesheet" href="assets/fonts.css">
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="assets/sh.css">
  <link rel="canonical" href="https://nodejs.org/api/hello.html">
</head>
<body class="alt apidoc" id="api-section-hello">
  <div id="content" class="clearfix">
    <div id="column2" class="interior">
      <div id="intro" class="interior">
        <a href="/" title="返回首页">
          RobotJs
        </a>
      </div>
      <ul>
<li><a class="nav-startnow" href="startnow.html">开始</a></li>
<li><a class="nav-hbuilder" href="hbuilder.html">Demo, 调试运行</a></li>
<li><a class="nav-hello active" href="hello.html">Hello World</a></li>
<li><a class="nav-autojs-vue" href="autojs-vue.html">与vue交互</a></li>
<li><a class="nav-normal" href="normal.html">常用api</a></li>
<li><a class="nav-links" href="links.html">支持库(超强)</a></li>
<li><a class="nav-patchs" href="patchs.html">热更新</a></li>
<li><a class="nav-deploy" href="deploy.html">打包</a></li>
<li><a class="nav-remote" href="remote.html">远程部署</a></li>
<li><a class="nav-java" href="java.html">与java交互</a></li>
<li><a class="nav-qa" href="qa.html">Q&amp;A - 常见问题</a></li>
<li><a class="nav-https-miren-lovemi-ren-colorui-document-" href="https://miren.lovemi.ren/colorui-document/" target="_blank" rel="noopener noreferrer">UI设计</a><div class="line"></div></li>
<li><a class="nav--" href="#">【API文档】:</a></li>
<li><a class="nav-overview" href="overview.html">Overview - 综述</a></li>
<li><a class="nav-documentation" href="documentation.html">Tip - 阅读说明</a></li>
<li><a class="nav-coordinatesBasedAutomation" href="coordinatesBasedAutomation.html">Click - 基于坐标的操作</a></li>
<li><a class="nav-widgetsBasedAutomation" href="widgetsBasedAutomation.html">开始 - 基于控件的操作</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_simpleactionautomator" href="widgetsBasedAutomation.html#widgetsbasedautomation_simpleactionautomator">Click - 基于控件的操作</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_uiselector" href="widgetsBasedAutomation.html#widgetsbasedautomation_uiselector">UiSelector - 查找控件</a></li>
<li><a class="nav-widgetsBasedAutomation-widgetsbasedautomation_uiobject" href="widgetsBasedAutomation.html#widgetsbasedautomation_uiobject">UiObject - 控件</a></li>
<li><a class="nav-app" href="app.html">App - 应用</a></li>
<li><a class="nav-canvas" href="canvas.html">Canvas - 画布</a></li>
<li><a class="nav-console" href="console.html">Console - 控制台</a></li>
<li><a class="nav-crypto" href="crypto.html">Crypto - 加解密与消息摘要</a></li>
<li><a class="nav-device" href="device.html">Device - 设备</a></li>
<li><a class="nav-dialogs" href="dialogs.html">Dialogs - 对话框</a></li>
<li><a class="nav-engines" href="engines.html">Engines - 脚本引擎</a></li>
<li><a class="nav-events" href="events.html">Events - 事件与监听</a></li>
<li><a class="nav-floaty" href="floaty.html">Floaty - 悬浮窗</a></li>
<li><a class="nav-files" href="files.html">Files - 文件系统</a></li>
<li><a class="nav-globals" href="globals.html">Globals - 一般全局函数</a></li>
<li><a class="nav-http" href="http.html">Http - HTTP</a></li>
<li><a class="nav-images" href="images.html">Images - 图片与图色处理</a></li>
<li><a class="nav-keys" href="keys.html">Keys - 按键模拟</a></li>
<li><a class="nav-media" href="media.html">Media - 多媒体</a></li>
<li><a class="nav-modules" href="modules.html">Modules - 模块</a></li>
<li><a class="nav-sensors" href="sensors.html">Sensors - 传感器</a></li>
<li><a class="nav-shell" href="shell.html">Shell - Shell命令</a></li>
<li><a class="nav-storages" href="storages.html">Storages - 本地存储</a></li>
<li><a class="nav-threads" href="threads.html">Threads - 多线程</a></li>
<li><a class="nav-timers" href="timers.html">Timers - 定时器</a></li>
<li><a class="nav-ui" href="ui.html">UI - 用户界面</a></li>
<li><a class="nav-https-developer-mozilla-org-zh-CN-docs-Mozilla-Projects-Rhino-Scripting_Java" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino/Scripting_Java">Work with Java - 调用Java API</a></li>
</ul>
<div class="line"></div>



    </div>

    <div id="column1" data-id="hello" class="interior">
      <header>
        <h1>用JS任意控制手机上的APP</h1>
        <div id="gtoc">
          <p>
            <a href="index.html" name="toc">索引</a> |
            <a href="all.html">查看全部</a>
          </p>
        </div>
        <hr>
      </header>

      <div id="toc">
        <h2>目录</h2>
        <ul>
<li><span class="stability_undefined"><a href="#hello_vue">vue与控制脚本的交互</a></span><ul>
<li><span class="stability_undefined"><a href="#hello_ui">从UI启动控制脚本(举例)</a></span><ul>
<li><span class="stability_undefined"><a href="#hello">项目文件</a></span><ul>
<li><span class="stability_undefined"><a href="#hello_1_robotjs">【第1步】. 新建robotjs脚本：</a></span></li>
<li><span class="stability_undefined"><a href="#hello_2_ui">【第2步】. 修改UI界面内容</a></span></li>
<li><span class="stability_undefined"><a href="#hello_3_hbuilder_app">【第3步】 从Hbuilder中启动app，</a></span></li>
</ul>
</li>
</ul>
</li>
<li><span class="stability_undefined"><a href="#hello_qq_714554851">QQ群： 714554851</a></span></li>
</ul>
</li>
</ul>

      </div>

      <div id="apicontent">
        <h1>vue与控制脚本的交互<span><a class="mark" href="#hello_vue" id="hello_vue">#</a></span></h1>
<p>建议先大致了解Vue项目结构后进行</p>
<pre><code>* 项目主体UI：pages/   各种UI样式举例(可忽略)
* 项目主体UI：pages/robots/        2个启动界面举例 
* 项目AJ脚本：static/robots/    (默认)用于存放控制脚本代码
</code></pre><h2>从UI启动控制脚本(举例)<span><a class="mark" href="#hello_ui" id="hello_ui">#</a></span></h2>
<h3>项目文件<span><a class="mark" href="#hello" id="hello">#</a></span></h3>
<p>不想看例子的人，请直接看这两个路径的源码</p>
<pre><code>pages/robots/
static/robots/
</code></pre><h4>【第1步】. 新建robotjs脚本：<span><a class="mark" href="#hello_1_robotjs" id="hello_1_robotjs">#</a></span></h4>
<p><code>在项目路径~/static/robots下新建文件demo.js</code></p>
<pre><code class="lang-js">launchApp(&quot;微信&quot;); 
click(&quot;发现&quot;); 
click(&quot;朋友圈&quot;);
desc(&quot;评论&quot;).findOne().click();
click(&quot;赞&quot;);
</code></pre>
<h4>【第2步】. 修改UI界面内容<span><a class="mark" href="#hello_2_ui" id="hello_2_ui">#</a></span></h4>
<p>页面: pages/index/index.vue</p>
<pre><code class="lang-html">&lt;template&gt;
&lt;view&gt; 
    &lt;button class=&quot;cu-btn bg-green shadow&quot; @tap=&quot;start&quot;&gt;启动&lt;/button&gt;
    &lt;button class=&quot;cu-btn bg-green shadow&quot; @tap=&quot;stop&quot;&gt;停止&lt;/button&gt;
&lt;/view&gt;
&lt;/template&gt;
&lt;script&gt; 
var {autojs} = require(&#39;robot-tools&#39;);
export default {
    methods: {
        start() {
            autojs.start({
                file: &#39;demo.js&#39;, //文件路径为./static/robots/demo.js 
            });
        },
        stop(){
          autojs.stop();
        }
    }
}
&lt;/script&gt;
</code></pre>
<h4>【第3步】 从Hbuilder中启动app，<span><a class="mark" href="#hello_3_hbuilder_app" id="hello_3_hbuilder_app">#</a></span></h4>
<pre><code>菜单：运行/手机或模拟器/选择你的手机
</code></pre><pre><code>(此时手机上会自动安装调试app)，
APP启动后，请为这个app授权”无障碍“，”悬浮窗“，”从后台启动”
</code></pre><h2>QQ群： 714554851<span><a class="mark" href="#hello_qq_714554851" id="hello_qq_714554851">#</a></span></h2>
<pre><code class="lang-js">  如果喜欢这个项目，可以请赠我一包华子 
</code></pre>

      </div>
    </div>
  </div>
  <script src="assets/sh_main.js"></script>
  <script src="assets/sh_javascript.min.js"></script>
  <script>highlight(undefined, undefined, 'pre');</script>
  <!-- __TRACKING__ -->
</body>
</html>